//回到顶部组件
<template>
  <div>
    <div type="button" class="back-top" @click="backTop()" v-show="backTopShow">
      <i class="iconfont icon-huidaodingbu"></i>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      backTopShow: false
    };
  },
  components: {},
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    backTop() {
      let back = setInterval(() => {
        if (document.body.scrollTop || document.documentElement.scrollTop) {
          document.body.scrollTop -= 200;
          document.documentElement.scrollTop -= 200;
        } else {
          clearInterval(back);
        }
      }, 100);
    },
    handleScroll() {
      if (document.documentElement.scrollTop + document.body.scrollTop > 100) {

        this.backTopShow = true;
      } else {
        this.backTopShow = false;

      }
    }
  },

};
</script>

<style lang="scss" scoped>
  @import "Backtop"
</style>
